<template>
  <div class="sys-rich-text">
    <wx-rich-text class="sys-rich-text-mini" v-if="isMiniprogram" :nodes="nodes" space="nbsp"></wx-rich-text>
    <div v-else v-html="nodes"></div>
  </div>
</template>

<script>
  export default {
    props: {
      text: {
        type: String,
        required: true
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
        nodes: this.getNodes()
      };
    },

    methods: {
      getNodes() {
        let text = this.text;
        let pattern = /<img([^"'>]|"[^"]*"|'[^']*')*>/gi;
        let arr = text.match(pattern);
        if (arr === null) {
          arr = [];
        }
        for (let i = 0; i < arr.length; i++) {
          const imgStr = arr[i];
          let newImg = `<img class="vue-rich-img"${imgStr.substring(4)}`;
          text = text.replace(imgStr, newImg);
        }
        let nodes = `<div class="vue-rich-editor">${text}</div>`;
        return nodes;
      }
    }
  };

</script>

<style lang="scss">
  .vue-rich-editor {
    line-height: 1.3;
    font-size: 14px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
  }

  .vue-rich-img {
    max-width: 100% !important;
    height: auto !important;
  }

</style>
